<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <!--内核渲染器-->
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
    <!--IE8/9及以后的版本都会以最高版本IE来渲染页面-->
    <meta name="format-detection" content="telephone=no">
    <!--手机号不被显示为拨号连接-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>个人中心</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="__PUBLIC__static/portal/css/bootstrap.min.css">-->
    <link href="https://cdn.bootcss.com/iview/2.4.0/styles/iview.css" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/iview.css" charset="UTF-8">-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/base.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/footer.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/font.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/iconfont(1).css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/index.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/center.css">

    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/jquery-1.11.3.min.js"></script>-->
    <script src="__PUBLIC__static/portal/js/jquery.cookie.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/bootstrap.min.js"></script>-->
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/vue.js" charset="UTF-8"></script>-->
    <script src="https://cdn.bootcss.com/iview/2.4.0/iview.min.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/iview.min.js" charset="utf-8"></script>-->

</head>

<body>
{include file="layout/head" /}

<div id="center">
    <div class="per_info">
        <div class="per_portrait">
            {if condition="isset($user['img'])"}
            <img src="{$user['img']}">
            {else /}
            <img src="__PUBLIC__static/portal/img/portrait_def.png">
            {/if}
            <div class="w80">
                <p>{$user['name']}</p>
                <p class="li-24 font_14">
                    <span>性别: {$user['sex']}</span>
                    <span>|</span>
                    <span>手机: {$user['phone']}</span>
                </p>
            </div>
        </div>
    </div>
    <div class="warp com_shadow">
        <div class="row per_record">
            <div class="col-md-3  col-sm-2 ">
                    <span class="br_r">
                        <a href="{:url('index/user/orderList')}">我的订单 </a>
                    </span>
            </div>
            <div class="col-md-3 col-sm-2">
                    <span class="br_r">
                        <a href="{:url('index/user/orderList', ['status' => 0])}">待付款(
                            <i>{$order[0]}</i>)</a>
                    </span>
            </div>
            <div class="col-md-3 col-sm-2">
                    <span class="br_r">
                        <a href="{:url('index/user/orderList', ['status' => 1])}">已付款(
                            <i>{$order[1]}</i>)</a>
                    </span>
            </div>
            <div class="col-md-3 col-sm-2">
                    <span>
                        <a href="{:url('index/user/orderList', ['status' => 2])}">发货(
                            <i>{$order[2]}</i>)</a>
                    </span>
            </div>
        </div>
    </div>
    <div class="warp warp_center">
        <div class="row  ">
            <div class="col-md-12 col-sm-12 ">
                <div class="per_center text-left  ">
                    <span>个人中心</span>
                    <div class="row">
                        <div class="col-md-3  col-sm-3">
                            <p>
                                <a href="{:url('index/user/changeInfoPage')}">
                                    <i class="icon iconfont_center col_blue "></i>
                                </a>
                            </p>
                            <p>
                                <a href="{:url('index/user/changeInfoPage')}">我的信息</a>
                            </p>
                        </div>
                        <div class="col-md-3  col-sm-3">
                            <p>
                                <a href="#" data-toggle="modal" data-target="#pwdModal">
                                    <i class="icon iconfont_center  col_blue"></i>
                                </a>
                            </p>
                            <p>
                                <a href="#" data-toggle="modal" data-target="#pwdModal"> 修改密码</a>
                            </p>
                        </div>
                        <div class="col-md-3  col-sm-3">
                            <p>
                                <a href="{:url('index/user/address')}">
                                    <i class="icon iconfont_center  col_blue"></i>
                                </a>
                            </p>
                            <p>
                                <a href="{:url('index/user/address')}">收货地址</a>
                            </p>
                        </div>
                        <div class="col-md-3  col-sm-3">
                            <p>
                                <a href="{:url('index/user/evaluationList')}">
                                    <i class="icon iconfont_center  col_blue"></i>
                                </a>
                            </p>
                            <p>
                                <a href="{:url('index/user/evaluationList')}">评价列表</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="warp warp_center">
        <div class="row  ">
            <div class="col-md-12 col-sm-12 ">
                <div class="per_center text-left  ">
                    <span>推荐书单</span>
                    <div class="row">
                        {foreach $rand as $value}
                        <div class="col-md-2  col-sm-3">
                            <a href="{:url('index/index/getBook', ['bookId' => $value.id])}">
                                <p>
                                    <img src="{$value.cover}"  class="img-responsive img-thumbnail"/>
                                </p>
                                <!--<p>{$value.name}</p>-->
                            </a>
                        </div>
                        {/foreach}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!---->
</div>

<div class="modal fade" id="pwdModal" tabindex="-1" role="dialog" aria-labelledby="pwdModalLabel" aria-hidden="true">
    <form class="form-horizontal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">
                        修改密码
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="old" class="col-sm-2 control-label">原密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="old" placeholder="请输入原密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="new" class="col-sm-2 control-label">新密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="new" placeholder="请输入新密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="news" class="col-sm-2 control-label">确认密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="news" placeholder="请再次输入新密码">
                            <p id="p_help" class="help-block" style="display: none;color: firebrick;"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submit-pwd">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </form>
</div>

{include file="layout/foot" /}

{include file="layout/goback" /}

<script>
    $(function () {
        $.each($('img'), function (index, item) {
            var width = $(item).attr('width');
            var height = $(item).attr('height');
            if (width != 'undefined' && width != '100%') {
                $(item).css({
                    'width': width + 'px',
                    'height': height + 'px'
                });
            }
        });
        
        $('#submit-pwd').click(function () {
            var old = $('#old').val();
            var newp = $('#new').val();
            var newsp = $('#news').val();

            if (old && newp && newsp) {
                if (old.length <6 || old.length > 20 || newp.length <6 || newp.length > 20 || newsp.length <6 || newsp.length > 20) {
                    $('#p_help').text('密码长度必须为6-20位！');
                    $('#p_help').css('display', 'block');
                    return;
                }
                if (newp == newsp) {
                    // $('#p_help').text('有值，相等');
                    // $('#p_help').css('display', 'block');
                } else {
                    $('#p_help').text('两次输入的新密码不一致！');
                    $('#p_help').css('display', 'block');
                    return;
                }
            } else {
                $('#p_help').text('请按提示，正确输入密码！');
                $('#p_help').css('display', 'block');
                return;
            }

            $.ajax({
                type: 'POST',
                url: '{:url("index/user/changePwd")}',
                data: {
                    'old':old,
                    'new': newp,
                },
                dataType: 'json',
                async: true,
                success: function (res) {
                    if (res.status) {
                        alert(res.msg);
                        location.href = '{:url("index/login/index")}';
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (msg) {
                    console.log(msg);
                }
            });

        });

        $('#pwdModal').on('show.bs.modal', function () {
            $('#old').val('');
            $('#new').val('');
            $('#news').val('');
            $('#p_help').css('display', 'none');
        });

    });



</script>

</body>

</html>